<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref使用</title>
    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/prop-types.js"></script>
    <script src="../react/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    // 这里和vue中使用的比较相似
    class Comp extends React.Component {
        constructor (props) {
            super(props)
            this.submit = this.submit.bind(this)
        }

        submit (e) {
            e.preventDefault()
            // 获取dom元素
            console.log('username', this.refs.username.value)
            console.log('password', this.refs.password.value)
        }

        render () {
            return (
                <form>
                    <input type="text" ref="username" placeholder="请输入用户名"/><br/>
                    <input type="password" ref="password" placeholder="请输入密码"/>
                    <button type="submit" onClick={this.submit}>提交</button>
                </form>
            )
        }
    }

    ReactDOM.render(<Comp></Comp>, document.getElementById('root'))
</script>
</body>
</html>
